<link rel="stylesheet" href="${request.contextPath}/lib/plugins/zTree3/css/zTreeStyle/zTreeStyle.css" type="text/css">
 <!--<link rel="stylesheet" href="${request.contextPath}/lib/plugins/select2/select2.min.css">-->
<div class="box box-primary">
     <div class="box-header with-border">
        <div id="mainpanel" style="margin: 0px 0px 0px 0px;">
		    <div id="mapcontent" style="width: 100%;position: relative;">
		    	<!-- ${user.nickName!} -->
				<div id="btn_list">
					
				</div>
				<div class="box-header with-border">
				  <div class="box-body" style="width: 100%">
					<div class="row">
						<#list btnlist as items>
							<button class="${items.funcBg!}" id="${items.funcCode!}">
							<i class="${items.funcIcon!}"></i> ${items.funcName!}</button>
						
						</#list>
						
						<!--<button type="button" class="btn btn-primary" id="senceTransform" sence="soa">-->
                            <!--<i class="fa fa-rotate-left"></i> 场景切换</button> -->
						
					</div>
				</div>	
				</div>
			    <div class="box-body">
		    	<table width="100%" class="table table-bordered table-striped" id="data_table">
		    	</table>
		    	</div>
		    </div>
		</div>
    </div>
</div>
<div id="from_view"></div>
<div class="modal" id="myModaltree" tabindex="-1" role="dialog" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">配置菜单</h4>
      </div>
      <div class="modal-body">
        <div class="zTreeDemoBackground left">
	      <ul id="treeDemo" class="ztree"></ul>
	   </div> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      	<button type="button" class="btn btn-primary" onclick="updateRolePermission()">保存修改</button>
      </div>
    </div>
  </div>
</div>
<div class="modal" id="myFuntree" tabindex="-1" role="dialog" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">配置</h4>
      </div>
      <div class="modal-body">
        <div class="zTreeDemoBackground left">
	      <ul id="funTree" class="ztree"></ul>
	   </div> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      	<button type="button" class="btn btn-primary" onclick="updateMenuPermission()">保存修改</button>
      </div>
    </div>
  </div>
</div>

<div class="modal bs-example-modal-lg" id="myModalMenu" tabindex="-1" role="dialog" >
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">角色</h4>
      </div>
      <div class="modal-body">
        <table width="100%" class="table table-bordered table-striped" id="dataMenu_table"></table>
      </div>
      <div class="modal-footer">
        <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      	<button type="button" class="btn btn-primary" onclick="updateRolePermission()">Save changes</button>-->
      </div>
    </div>
  </div>
</div>

<!--<script src="${request.contextPath}/lib/plugins/datatables/jquery.dataTables.min.js"></script>-->
<!--<script type="text/javascript" src="${request.contextPath}/lib/plugins/zTree3/js/jquery.ztree.core.js"></script>-->
<!--<script type="text/javascript" src="${request.contextPath}/lib/plugins/zTree3/js/jquery.ztree.excheck.js"></script>-->
<script type="text/javascript" src="${request.contextPath}/js/role/menuZtree.js"></script>
<script type="text/javascript" src="${request.contextPath}/js/role/permissionZtree.js"></script>
<!--<script src="${request.contextPath}/lib/plugins/select2/select2.full.min.js"></script>-->
<!--<script type="text/javascript" src="${request.contextPath}/js/aboutForm.js"></script>-->
<script type="text/javascript">

      var sence=$("#senceTransform").attr("sence");
       //场景切换
       $("#senceTransform").on("click",function(){
	   if(sence=="soa"){
		$("#senceTransform").attr("sence","coa");
		sence=$("#senceTransform").attr("sence");
	   }else if(sence=="coa"){
		$("#senceTransform").attr("sence","soa");
		sence=$("#senceTransform").attr("sence");
	   }
	   //弹出对话框，源码在aboutForm.js
	   
	   //showDailog('切换成功，请稍后！',2000);
	   var msg="成功切换到"+sence+"场景！";
	   //showDailog(msg,2000);
	   //var data={"sence":sence}
	   //var url = contextPath + "/soa/role/datas/search";
	    DTrefresh(sence);

       });

        $(document).ready(function() {
        	search();
        });
        
        var table;
        //modelThat是编辑模态框的临时保存对象,在校验后成功提交后关闭模态框
        var modelThat;
        
        function search(){
        	var params = {};
    		params.sence = sence;
        	
        	table = $('#data_table').DataTable({
			    //ajax: contextPath+"/soa/role/datas/search",
			"ajax" : {
			"url":contextPath + "/soa/role/datas/search",
			"type": "post",
			"dataType":"json",
			"data":params
			  
		     },
			    pageLength : 8,

	            "language": {
	                "sProcessing": "正在加载中......",
	                "sLengthMenu": "每页显示 _MENU_ 条记录",
	                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
	                "sZeroRecords": "对不起，查询不到相关数据！",
	                "sEmptyTable": "表中无数据存在！",
	                "search": "查询:",
	                "paginate": {
	                   "previous": "上一页",
	                   "next": "下一页",
	                   "first": "第一页",
	                   "last": "最后一页"
	                }
	             },
		        paging: true,
		        lengthChange: false,
		        searching: false,
		        ordering: false,
		        search: false, //显示搜索框
		        info: true,
		        autoWidth: true,
			    columns: [
					{ 
						title: '序号',
						width:"5%",
						data: function (e) {//这里给最后一列返回一个操作列表
                       		return '<input type="checkbox" value="'+e.id+'">';
                    	}						
					},
					{ 
						title: '角色编码',
						width:"15%",
						data: 'roleName',
						align: 'center',
	                    valign: 'middle',						
					},
					{ 
						title: '角色名称',
						width:"15%",
						data: 'roleDesc',
						align: 'center',
	                    valign: 'middle',
					},
					{
						title: '权限管理',
						width:"20%",
						data: function (e) {//这里给最后一列返回一个操作列表
							//var a = e.roleSence;
                       		return '<a class="btn btn-default btn-xs show-detail-json" onclick=showMenu('+e.id+',"'+e.roleSence+'") data-whatever='+e.id+'><i class="icon-edit"></i>分配菜单权限</a>   <a class="btn btn-default btn-xs show-detail-json" onclick=showRoleMenu('+e.id+') data-whatever='+e.id+'><i class="icon-edit"></i>分配功能权限</a>';
                       		//return '<a class="btn btn-default btn-xs show-detail-json" onclick=showMenu('+e.id+',"'+e.roleSence+'") data-whatever='+e.id+'><i class="icon-edit"></i>分配菜单</a>';
						}
					}
			    ]
			});
        	
        }
        
        function btncmd(cmd){
        	var data={};
        	ajax("/soa/role/"+cmd, "html", function(obj){
        		$("#from_view").html(obj);
        		$('#modelfrom').on('show.bs.modal', function (event) {
	      			  var button = $(event.relatedTarget);
	      			  var recipient = "dskfh";
	      			  var modal = $(this);
	      			  modal.find('.modal-title').text(recipient);
	      			  modal.find('.modal-body input').val(recipient);
	      		});
        		$('#modelfrom').modal('show');
        	});
        }



      	//操作方法
    	$(function(){

    		//增加角色
    		$('#add').on('click',function(){
    			post("/soa/role/inst", "html", "", function(obj) {
        			var d = dialog({
        				title : '新增角色',
        				content : obj,
        				width : 400,
        				height : 300,
        				okValue : '保存',
        				zIndex : 1050,
        				ok : function() {
        						modelThat = this;
        						this.title('正在提交..');
                             $('#form_role').bootstrapValidator('validate');

        						return false;
        					 cancel: false
        					},
        				cancelValue : '取消',
        				cancel : function() {
        				}
        			});
        			d.showModal();
        		});
        	});

        	

    		//编辑角色
    		$('#edit').on('click',function(){
    			var $table = table.table().node();
        		var $chkbox_all = $('tbody input[type="checkbox"]', $table);
        		var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
        		if($chkbox_checked.length<1){
        			var d = dialog({
        				title:'提示',
        				content : '请勾选要修改的记录！'
        			});
        			d.show();
        			setTimeout(function() {
        				d.close().remove();
        			}, 2000);
        		}else
        		if($chkbox_checked.length>1){
        			var d = dialog({
        				title:'提示',
        				content : '请不要勾选多条记录修改！'
        			});
        			d.show();
        			setTimeout(function() {
        				d.close().remove();
        			}, 2000);
        		}else{
        			var data={"id":$chkbox_checked.val()};
        			var id=$chkbox_checked.val();
        			
        			post("/soa/role/edit","html",data,function(obj){
        				//console.log(obj);
        				var d = dialog({
        					title : '修改角色',
        					content :obj,					
        					width : 400,
        					height : 300,
        					okValue: '保存',
        					zIndex:1050,
        					ok : 
        						function() {
        						modelThat = this;
        						this.title('正在提交..');
                             $('#form_role').bootstrapValidator('validate');

        						return false;
        					 cancel: false
        					},
        			     cancelValue:'取消',
        				 cancel: function() {
        					 
        				  }
        				});
        				d.showModal();
        			});
        		  }

        	});

    		//删除无效角色
        	$('#del').on('click',function(){
        		var $table = table.table().node();
        		
        		var $chkbox_all = $('tbody input[type="checkbox"]', $table);
        		var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
        		
        		var name = $chkbox_checked.parent().parent().find('td').eq(2).html();
        		
        		var data={"id":$chkbox_checked.val()};
        		var id=$chkbox_checked.val();
        		
        		if($chkbox_checked.length<1){
        		var t = dialog({
        			title:'提示',
        			content : '请勾选要删除的记录！'
        		});
        		t.show();
        		setTimeout(function() {
        			t.close().remove();
        		}, 2000);
        	    }else if($chkbox_checked.length>1){
        			var t = dialog({
        				title:'提示',
        				content : '暂无删除多条记录权限'
        			});
        			t.show();
        			setTimeout(function() {
        				t.close().remove();
        			}, 2000);
        	   }else{
        			//alert(id);//测试可拿到id
        			var d = dialog({
        				
                         title:'提示',
                         content:'确认删除昵称为：'+name+' 的这条记录？',
                         okValue:'确认',
                         ok:function(){
                        	 var that=this;
                        	 var url='/soa/role/datas/del';
                        	 delRole(id,url);
    						 setTimeout(function() {
    								table.ajax.reload(null, false);
    								that.close().remove();
    							}, 100);
    						},
    						cancelValue : '取消',
    						cancel : function() {

    				}

    			});
    			d.showModal();
    		}

            });

    	});
        
	//刷新数据
	function DTrefresh(sence) {
		var url = contextPath + "/soa/role/datas/search";
        table.settings()[0].ajax.url = url;   
	    table.settings()[0].ajax.data = {"sence":sence};
		setTimeout(function() {
			table.ajax.reload();
		}, 200);
	}

	function delRole(id, url) {
		var id = {
			"id" : id
		};
		$.ajax({
			url : contextPath + url,
			type : "post",
			data : id,
			dataType : "json",
			async : false,
			success : function(result) {
				var t = dialog({
    				title:'提示',
    				content : result.msg
    			});
    			t.show();
    			setTimeout(function() {
    				t.close().remove();
    			}, 2000);
			}
		});
	}
</script>